import { AntDesign, Ionicons, MaterialIcons } from "@expo/vector-icons";
import { Tabs } from "expo-router";

export default function TabLayout() {
    return (
        <Tabs
            screenOptions={{
                tabBarActiveTintColor: "lightgreen", // 这个是底部tab的文字的颜色
                headerStyle: {
                    height: 80, // todo 这里我们还没有启用safearea组件, 所以看起来貌似顶部tabBar有点高
                    backgroundColor: "lightgreen",
                },
                headerShadowVisible: true,
                headerTintColor: "white", // 这个是什么地方的颜色?(安卓上是左上角tabBarTitle的颜色)
                tabBarStyle: {
                    backgroundColor: "white" // 这个是底部tab的背景颜色
                }
            }}
        >
            <Tabs.Screen
                // 貌似是默认渲染第一屏, 作为启动app的首页
                name="index" // name属性指定当前tab的路由,也就是指定渲染那个页面
                options={{
                    title: "Home",
                    tabBarIcon: ({ color, focused }) => (
                        <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
                    ),
                }}
            />

            <Tabs.Screen
                name="about"
                options={{
                    title: "About",
                    tabBarIcon: ({ color, focused }) => (
                        // <Ionicons name={focused ? 'home-sharp' : 'home-outline'} color={color} size={24} />
                        // <MaterialIcons name="read-more" size={24} color={color} />
                        <AntDesign name="infocirlceo" size={24} color={color} />
                    ),
                }}
            />

            <Tabs.Screen name="hidden" options={{
                title: "Hidden", tabBarIcon: ({ color, focused }) => (
                    // <AntDesign name="eyeo" size={24} color={color} />
                    <MaterialIcons name="disabled-visible" size={24} color={color} />
                )
            }} />

            <Tabs.Screen name="user" options={{
                title: "User", tabBarIcon: ({ color, focused }) => (
                    <AntDesign name="user" size={24} color={color} />
                )
            }} />
        </Tabs>
    );
}